﻿@page "/docs/extensions/datagrid/features/reordering"

<Seo Canonical="/docs/extensions/datagrid/features/reordering" Title="Blazorise DataGrid Reordering" Description="Learn Blazorise by the example. Easily adjust the order of your columns with the Blazorise DataGrid's reordering feature. Drag and drop column by moving them with the mouse." />

<DocsPageTitle Path="Extensions/DataGrid/Features/Reordering">
    Blazorise DataGrid: Reordering
</DocsPageTitle>

<DocsPageLead>
    Drag and drop column by moving them with the mouse.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    The Blazorise DataGrid provides a powerful reordering feature that allows users to change the order of columns by simply dragging and dropping them. This feature enhances user experience by allowing customization of the grid layout according to user preferences.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Reorderable">
        To enable column reordering, set the <Code>Reorderable</Code> property on the <Code>DataGridColumn</Code> components. The columns can be rearranged by clicking and dragging them to the desired position.
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridReorderingColumnsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridReorderingColumnsExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>